<style scoped lang="scss">
.el-input {
  width: 200px;
}

.el-form {
  margin-bottom: -15px;
}

:deep(.el-table__body) {
  .success-row {
    color: #2ec2a5;
    font-weight: bolder;
  }
}
</style>
<template>
  <div class='public_page'>
    <el-form inline :model="searchParams" ref="refSearchParams">
      <el-form-item label="出通单号">
        <el-input v-model="searchParams.shippingOrderNumber" placeholder="请输入出通单号" clearable @clear="getTableList" />
      </el-form-item>
      <!--      <el-form-item label="物流公司">-->
      <!--        <el-input v-model="searchParams.companyName" placeholder="请输入物流公司名称" clearable />-->
      <!--      </el-form-item>-->
      <el-form-item label="物流公司">
        <el-select v-model="searchParams.companyName" filterable placeholder="请输入物流公司" clearable @clear="getTableList">
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="订单日期">
        <el-date-picker v-model="date" type="daterange" start-placeholder="选择开始日期" end-placeholder="选择结束日期"
          value-format="YYYY-MM-DD" clearable @change="searchTableList" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="Search" @click="search">搜 索</el-button>
      </el-form-item>
    </el-form>
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="全部" name=""></el-tab-pane>
      <el-tab-pane label="竞价中" name="bidding"></el-tab-pane>
      <el-tab-pane label="竞价成功" name="success"></el-tab-pane>
      <el-tab-pane label="竞价失败" name="failed"></el-tab-pane>
    </el-tabs>
    <el-table v-bind="propsRes.table" style="height: 100%;" v-loading="loading" ref="refTable" v-on="tableEvent"
      :span-method="objectSpanMethod" :cell-class-name="addClass">
      <el-table-column v-if="activeName == ''" align="center" show-overflow-tooltip prop="status" width="150px"
        label="状态">
        <template #default="scope">
          <el-tag
            :type="scope.row.bidStatus == 'success' ? 'success' : (scope.row.bidStatus == 'failed' ? 'error' : 'warning')"
            disable-transitions>{{ scope.row.bidStatus == 'bidding' ? '竞价中' : (scope.row.bidStatus == 'success' ? '竞价成功' :
              '竞价失败') }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" show-overflow-tooltip prop="releaseDate" min-width="180px"
        label="发布日期"></el-table-column>
      <el-table-column align="center" min-width="170px" label="出通单号">
        <template #default="scope">
          <el-button link @click="openDetail(scope.row.shippingOrderNumber)"
            type="primary">{{ scope.row.shippingOrderNumber }}</el-button>
        </template>
      </el-table-column>
      <el-table-column align="center" show-overflow-tooltip prop="price" min-width="150px" label="竞价阈值">
        <template #default="scope">
          {{ showValueOrAsterisk(scope.row.price) }}
        </template>
      </el-table-column>
      <el-table-column v-if="activeName == '' || activeName == 'bidding'" align="center" show-overflow-tooltip prop="time"
        min-width="150px" label="竞价时长">
        <template #default="scope">
          <el-countdown v-if="scope.row.bidStatus == 'bidding'"  title="" :value="new Date(scope.row.endTime).getTime()" />
        </template>
      </el-table-column>
      <el-table-column align="center" show-overflow-tooltip prop="shippingAddress" min-width="180px" label="发货地址"></el-table-column>
      <el-table-column align="center" show-overflow-tooltip prop="companyName" min-width="150px" label="物流公司">
        <template #default="scope">
          <span :class="{ 'success-row': scope.row.company_status == 1 }">{{ scope.row.companyName }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" show-overflow-tooltip prop="firstBid" min-width="150px" label="一轮出价">
        <template #default="scope">
          <span :class="{ 'success-row': scope.row.company_status == 1 }">{{ showValueOrAsterisk(scope.row.firstBid)
          }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" show-overflow-tooltip prop="secondBid" min-width="180px" label="二轮出价">
        <template #default="scope">
          <span :class="{ 'success-row': scope.row.company_status == 1 }">{{ showValueOrAsterisk(scope.row.secondBid)
          }}</span>
        </template>
      </el-table-column>
      <el-table-column v-if="activeName == 'success'" align="center" show-overflow-tooltip min-width="180px" label="中标公司">
        <template #default="scope">
          <span :class="{ 'success-row': scope.row.company_status == 1 }">{{ scope.row.winCompany }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作" width="150">
        <!-- <el-table-column align="center" label="操作" width="150"> -->
        <template #default="scope">
          <el-button v-if="scope.row.bidStatus == 'failed'" link type="primary" size="small" @click="issue(scope.row.id, scope.row.shippingOrderNumber)">竞价发布</el-button>
          <el-button v-if="scope.row.bidStatus == 'failed'" link type="primary" size="small" @click="directIssue(scope.row.id, scope.row.shippingOrderNumber)">直接发布</el-button>
          <el-button v-if="scope.row.bidStatus == 'bidding' || scope.row.bidStatus == 'success'" link type="primary" size="small" @click="cancel(scope.row.id)">取消</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="public_pagination">
      <el-pagination v-bind="propsRes.pagination" v-on="paginationEvent" />
    </div>
    <againIssue ref="formRef" @ok="getSuccess" @updateList="getTableList"></againIssue>
    <showDetail ref="showDetailFormRef" @ok="getSuccess" @updateList="getTableList"></showDetail>
    <againDirectIssue ref="directIssueFormRef" @ok="getSuccess" @updateList="getTableList"></againDirectIssue>
  </div>
</template>

<script setup>
import useTableProps from '@/hooks/tableList'
import { postGetBiddingOrder, postBiddingOrderStop } from '@/api/BiddingOrder.js'
import { postPageCompanyInformation } from '@/api/outOrder.js'
import againDirectIssue from "@/views/components/againDirectissue.vue";
import againIssue from "@/views/components/againIssue.vue";
import showDetail from "@/views/components/showDetail.vue";
import { postDeliverPageCompanyInformation } from "@/api/deliveryOrder.js";

const formRef = ref(null);
const refTable = ref(null)
const directIssueFormRef = ref(null);
const showDetailFormRef = ref(null)
const refSearchParams = ref(null)
const searchParams = reactive({
  shippingOrderNumber: '',
  companyName: '',
})
const activeName = ref('')
const options = []
const message = inject('message')

const getDeliverList = async () => {
  try {
    const res = await postDeliverPageCompanyInformation({})
    res.data.forEach(item => {
      options.push({
        value: item.companyName,
        label: item.companyName
      })
    })
  }
  catch (err) {
    console.log(err);
  }
}
const handleClick = (tab) => {
  propsRes.value.table.data = []
  // refTable.value.doLayout()
  searchParams.bidStatus = tab.props.name
  searchTableList()
}

const showValueOrAsterisk = (value) => {
  const isShow = localStorage.getItem('isShow');
  return isShow == '0' ? '*****' : value;
};

// const addClass = ({ row, rowIndex, column, columnIndex }) => {
//   if(columnIndex == 6){
//     return 'success-row'
//   }
// }

const cancel = async (id) => {
  try {
    console.log(id)
    await message.confirmMsg('是否取消发布？')
    await postBiddingOrderStop({ id: id })
    message.notify('success', '取消发布成功')
    await getTableList()
  } catch (error) {
    console.log(error)
  }
}
const search = async () => {
  try {
    propsRes.value.table.data = []
    await searchTableList()
  } catch (error) {
    console.log(error)
  }
}

const getTableList = async () => {
  try {
    loading.value = true
    let params = {
      ...searchParams,
      page: propsRes.value.pagination.currentPage,
      row: propsRes.value.pagination.pageSize,
    }
    if (date.value?.length > 0) {
      params.startDate = date.value[0];
      params.endDate = date.value[1];
    } else {
      params.startDate = "";
      params.endDate = "";
    }
    const res = await postGetBiddingOrder(params)
    console.log(res);
    // propsRes.value.table.data = res.data.list;
    await detailsPageMergeOut(res.data.list || [])
    await setPagination({ current: res.data.page, total: res.data.rowsTotal });
    loading.value = false
  } catch (err) {
    loading.value = false
    console.log(err);
  }
}

const { loading, propsRes, tableEvent, paginationEvent, setPagination, searchTableList, date } = useTableProps({
  searchParams,
  getTableList,
  url: postGetBiddingOrder
})

onMounted(() => {
  getDeliverList()
  getTableList()
})
const objectSpanMethod = ({ row, column, rowIndex, columnIndex }) => {
  if (activeName.value == '') {
    if (columnIndex < 6 || columnIndex == 9) {
      return {
        rowspan: row.rowNum,
        colspan: 1
      };
    }
  }
  else if (activeName.value == 'bidding') {
    if (columnIndex < 5 || columnIndex == 8) {
      return {
        rowspan: row.rowNum,
        colspan: 1
      };
    }
  }
  else if (activeName.value == 'success') {
    if (columnIndex < 4 || columnIndex >6) {
      return {
        rowspan: row.rowNum,
        colspan: 1
      };
    }
  }
  else if (activeName.value == 'failed') {
    if (columnIndex < 4 || columnIndex == 7) {
      return {
        rowspan: row.rowNum,
        colspan: 1
      };
    }
  }
}
const detailsPageMergeOut = (list) => {
  propsRes.value.table.data = []
  list.forEach((item, mainIndex) => {
    // console.log(item);
    if (Array.isArray(item.companyInfoDtos) && item.companyInfoDtos.length > 0) {
      // console.log(item);
      item.companyInfoDtos.forEach((val, index) => {
        let content = Object.assign(val, item)
        content.uuid = `${content.id}_${index}`
        content.index = mainIndex + 1 + (propsRes.value.pagination.currentPage - 1) * propsRes.value.pagination.pageSize
        if (index == 0) {
          content['rowNum'] = item.companyInfoDtos.length
          content['mainIndex'] = mainIndex + 1
        }
        propsRes.value.table.data.push(content)
      })
    } else {
      let content = Object.assign({}, item)
      content.uuid = `${content.id}_${0}`
      content.rowNum = 1
      content.index = mainIndex + 1 + (propsRes.value.pagination.currentPage - 1) * propsRes.value.pagination.pageSize
      propsRes.value.table.data.push(content)
    }
  });
  console.log('propsRes.value.table.data', propsRes.value.table.data)
}
const issue = async (id, shippingOrderNumber) => {
  const res = await postPageCompanyInformation({});
  const companyInfo = res.data;
  formRef.value.getParent({ id, companyInfo, shippingOrderNumber });
};

const getSuccess = () => {
  getTableList();
};

const directIssue = async (id, shippingOrderNumber) => {
  const res = await postPageCompanyInformation({});
  const companyInfo = res.data;
  directIssueFormRef.value.getParent({ id, shippingOrderNumber, companyInfo });
}
const openDetail = (shippingOrderNumber) => {
  showDetailFormRef.value.getParent(shippingOrderNumber)
  console.log(shippingOrderNumber)
}
</script>
